<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>博客首页</title>
<script type="text/javascript" src="common/component/jquery/jquery-1.7.1.js"></script>
<style type="text/css">

	body {
		margin: 0;
	}
	
</style>
</head>
<body>

	<canvas id="canvas" style="background-color:red;"></canvas>
	
</body>

<script type="text/javascript">

	$(document).ready(function(){
		//$('#canvas').attr("width", $(document).width());
		//$('#canvas').attr("height", $(document).height());
		var canvas = document.getElementById('canvas');
		canvas.width = $(document).width();
		canvas.height = $(document).height();
		
		var context = canvas.getContext('2d');
		
		var leftX = 0;
		var rightX = 0;
		var interval = setInterval(function(){
			leftX-=3;
			context.clearRect(0, 0, $(document).width() / 2, $(document).height());
			context.fillStyle = "#000000";
			context.fillRect(leftX, 0, $(document).width() / 2, $(document).height());
			context.fillStyle = "#FFFFFF";
			context.font = "200px Comic Sans MS";
			context.textBaseline = "top";
			context.fillText('Dou', $(document).width() / 2 - (370 - leftX), 150);
			
			rightX+=3;
			context.clearRect($(document).width() / 2, 0, $(document).width() / 2, $(document).height());
			context.fillStyle = "#000000";
			context.fillRect($(document).width() / 2 + rightX, 0, $(document).width() / 2, $(document).height());
			context.fillStyle = "#FFFFFF";
			context.font = "200px Comic Sans MS";
			context.textBaseline = "top";
			context.fillText('ble', $(document).width() / 2 + rightX, 150);

			if(leftX < 0 - $(document).width() / 2) {
				clearInterval(interval);
			}
		});
	});

</script>

</html>